<template>
    <div class="edit" v-if="show">

        <div id="edit" :class="edit_class">

            <!--S标题-->
            <h2>
                <span v-if="link_id">编辑推广链接</span>
                <span v-else>添加推广链接</span>
                <i
                        class="close iconfont icon-guanbi"
                        @click="$emit('close')"
                >
                </i>
            </h2>
            <!--E标题-->

            <!--Sform-->
            <div id="form">
                    <cube-form
                            ref="form"
                            :model="model"
                            :schema="schema"
                            :options="{layout:'fresh'}"
                            @submit="submit"
                    >
                    </cube-form>

                    <!--S编辑按钮-->
                    <div class="submit-button">
                        <cube-button
                                @click="$refs.form.submit()"
                                :disabled="submitting"
                        >
                            <template v-if="this.link_id === ''">创建</template>
                            <template v-else>修改</template>
                        </cube-button>
                    </div>
                    <!--E编辑按钮-->
            </div>
            <!--Eform-->

        </div>

    </div>
</template>

<script>
export default {
    name: "edit",
    data() {
        return {
            // id 编辑区域class，控制打开关闭的动画
            edit_class: "close",
            // 表单数据
            model: {
                name: '',
                link: ''
            },
            schema: {
                fields: [
                    {
                        type:'input',
                        modelKey:'name',
                        key: 'name',
                        label:'标题',
                        props: {
                            placeholder: '推广标题'
                        },
                        rules: {
                            required: true,
                            max: 8
                        },
                        messages: {
                            required: '不能为空',
                            max: '字数不能大于8'
                        }
                    },
                    {
                        type:'input',
                        modelKey:'link',
                        key: 'link',
                        label:'链接',
                        props: {
                            placeholder: '推广链接'
                        },
                        rules: {
                            required: true
                        },
                        messages: {
                            required: '不能为空'
                        }
                    }
                ]
            },
            // 提交状态
            submitting: false
        }
    },
    props: {
        // 区域显示状态
        show: {
            type: Boolean,
            default: false
        },
        // 链接id
        link_id: {
            type: String,
            default: ''
        }
    },
    watch: {
        // 显示状态改变
        show() {
            this.toggle()
        }
    },
    methods: {
        /**
         * 显示隐藏区域
         */
        toggle() {
            if (this.show) {
                this.reset()
                setTimeout(() => {
                    this.edit_class = 'open'
                }, 100)
            } else {
                this.edit_class = 'close'
            }
        },
        /**
         * 重置(设置)表单数据
         */
        reset() {
            if(this.link_id === '') {
                this.model = {
                    name: '',
                    link: ''
                }
            } else {
                this.$get('link/get',{
                    link_id: this.link_id
                })
                    .then((res) => {
                        let {code, data} = res.data
                        if(code === 0) {
                            this.model = {
                                name: data.name,
                                link: data.link
                            }
                        }
                    })
            }
        },
        /**
         * 提交
         */
        submit(element, model) {
            this.submitting = true
            this.$post("link/edit", {
                link_id: this.link_id,
                data: model
            })
                .then((res) => {
                    this.submitting = false
                    let {code, data} = res.data
                    if(code === 0){
                        if(this.link_id === '') {
                            this.$emit("createSuccess", data)
                        } else {
                            this.$emit("editSuccess")
                        }
                        this.$createToast({
                            type: 'correct',
                            time: 2000,
                            txt: '成功',
                            zIndex: 3000
                        }).show()
                    } else {
                        this.$createToast({
                            type: 'error',
                            time: 2000,
                            txt: '操作失败',
                            zIndex: 3000
                        }).show()
                    }
                })
        }
    }
}
</script>

<style scoped lang="less" src="./edit.less"></style>
